(($) => {
    $.extend({
        sofia: function(componentName, template, ...rest) {
            const element = $(`div[data-init=${ componentName }]`);
            
            if(element.size() >= 1) {
                console.info("initializeing sofia component '" + componentName + "'");
            } else {
                console.error("sofia component '" + componentName + "' isnot found at this context");
            }
            
            element.first().each(function() {
                template($(this), rest);
            });
        }
    });
})(jQuery);


$(() => {
    
    $.sofia('nav', function(e) {
        
        const menuBtns = e.find('.menu-button'),
              subMenus = e.find('.sub-menu');
        
        menuBtns.hover(function() {
            subMenus.hide();
            $(this).find('.sub-menu').show();            
        });
        
        subMenus.mouseleave(function() {
            let timer = setTimeout(() => {
                $(this).hide();
                clearTimeout(timer);
            }, 0);             
        });
    });
    
    $.sofia('user', function(e) {
        
        e.hover(function() {
            let status = e.data('isHover') || false;
            if(!status) {
                e.find('#user-face').toggleClass('user-troggle-color');
                e.find('#user-menu').stop().slideDown(200);
                e.data('isHover', true);
            }            
        });
        
        e.mouseleave(function() {
            let timer = setTimeout(() => {
                e.find('#user-face').toggleClass('user-troggle-color');
                e.find('#user-menu').stop().slideUp(200);
                e.data('isHover', false);
            }, 0);           
        });
    });
    
    $.sofia('ad-list', function(e, { elementWidth = 320 }) {
        
        const adList = {
            
            list            : e.find('.ad-list'),
            items           : e.find('.ad-item'),
            prop            : e.find('.ad-prop'),
            leftBtn         : e.find('.ad-move-left'),
            rightBtn        : e.find('.ad-move-right'),
            listWidth       : e.width(),
            elementWidth     : elementWidth,
            imageUploadBtn  : $(`<div class="ad-on-edit"><i class="fa fa-image"></i></div>`),
            hiddenInput     : $(`<input type="file" accept="image/png, image/jpeg, image/jpg" />`),
            
            delayOn : function(callback, timestamp, ...args) {
                const timer = setTimeout(() => {
                    callback(args);
                    clearTimeout(timer);
                }, timestamp);
            },
            
            delay : function(callback, ...args) {
                this.delayOn(callback, 0, args);
            },
            
            initHiddenInput : function() {
                this.hiddenInput.change(function() {
                    
                    console.log($(this).val());
                    
                    $('.ad-on-edit').parent().css({ 'background-image' : `url(img/1.jpg)` });
                    
                    
                });                
            },
            
            initImageUpload: function() {
                this.imageUploadBtn.find('i').click(() => this.hiddenInput.val('').click());            
            },
            
            initAdItemsLocation : function() {
                this.items.each((i, e) => $(e).css({ left: this.elementWidth * i + "px" }));
            },
            
            initAdItemOnClick : function() {
                const that = this;
                this.items.click(function() {
                    that.imageUploadBtn.remove().appendTo($(this));
                    that.initImageUpload();
                });   
            },
            
            initPageBtn : function() {
                
                if(this.items.size() * this.elementWidth <= this.listWidth) return;
                
                const list = this.list, 
                      rightBtn = this.rightBtn, 
                      leftBtn = this.leftBtn,
                      elementWidth = this.elementWidth;
                
                rightBtn.click(() => {
                    if(!leftBtn.hasClass('active')) {
                        leftBtn.addClass('active');
                        const head = list.find('.ad-item').first();
                        const clone = head.clone(true).css({ left: (list.size() + 1) * elementWidth + "px" });
                        clone.appendTo(list);
                        list.find('.ad-item').each((i, e) => $(e).css({ left: elementWidth * (i - 1) + "px" }));
                        this.delayOn(() => { head.remove(); leftBtn.removeClass('active'); }, 500);              
                    }
                });
                
                leftBtn.click(() => {
                    if(!rightBtn.hasClass('active')) {
                        rightBtn.addClass('active');
                        const last = list.find('.ad-item').last();
                        const clone = last.clone(true).css({ left: -elementWidth + "px" });
                        clone.prependTo(list);
                        this.delay(() => list.find('.ad-item').each((i, e) => $(e).css({ left: elementWidth * i + "px" })));
                        this.delayOn(() => { last.remove(); rightBtn.removeClass('active'); }, 500);              
                    }
                });            
            },
            
            initPropInputBorderAnimatation : function() {
                this.prop.find('input[type=text]').each(function() {
                    const e = $(this), underline = e.siblings('.ad-underline');    
                    e.focus(() => underline.stop().animate({ left : 0 }, 300));
                    e.blur(() => underline.stop().animate({ left : -750 + "px" }, 300));
                });                  
            },
            
            initAll : function() {
                this.initHiddenInput();
                this.initAdItemsLocation();
                this.initAdItemOnClick();
                this.initPageBtn();
                this.initPropInputBorderAnimatation();
            }
        };   
        
        adList.initAll();
    });
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
});

